<template>
  <el-dialog width="60%"
             :close-on-click-modal="false"
             :model-value="show"
             @close="show = false"
             :destroy-on-close="true"
             title="详情"
             append-to-body>
    <el-table border
              :data="tableData"
              :header-cell-style="{color: '#000'}"
              max-height="450"
              stripe
              class="customTable"
              v-loading="loading">
      <el-table-column prop="advertiser_name"
                       label="账户名称"></el-table-column>
      <el-table-column prop="campaign_name"
                       label="推广系列名称"></el-table-column>
      <el-table-column prop="ad_name"
                       label="广告名称"></el-table-column>
      <el-table-column prop="stat_time_day"
                       label="日期"></el-table-column>
      <el-table-column prop="spend"
                       label="总消耗"></el-table-column>
      <el-table-column prop="total_onsite_shopping_value"
                       label="总收入(商店)"></el-table-column>
      <el-table-column prop="conversion"
                       label="付费数(商店)"></el-table-column>
      <el-table-column prop="onsite_shopping_roas"
                       label="ROAS(商店)"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-sizes="pageSizes"
                   background
                   :page-size="pageSize"
                   :total="pageTotal"
                   layout="sizes, total, ->, prev, pager, next, jumper">
    </el-pagination>
    <template #footer>
      <el-button type="primary"
                 @click="show = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import { expertVideoReportInfo } from '/@/api/backend/advertisement/expertVideo'

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizes = [10, 20, 30, 50, 100, 200, 250, 300, 500]
const pageTotal = ref(0)
const loading = ref(false)
const show = ref(false)
const tableData = ref([] as any[])

const init = () => {
    getTableData()
}

const handleSizeChange = (val:number) => {
    pageNum.value = 1
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val:number) =>  {
    pageNum.value = val
    getTableData()
}
const getTableData = () => {
    loading.value = true
    expertVideoReportInfo({ 
        page: pageNum.value, 
        limit: pageSize.value,
        name: props.curRow.rowData.name, 
        ...props.curRow.search
    }).then(res => {
        if(res.data && res.data.list.length) {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        } else {
            tableData.value = []
            pageTotal.value = 0
        }
        loading.value = false
    })
}

const props = defineProps({
    curRow:{
        required: true,
        type: Object,
        default: () => {return {}}
    }
})

defineExpose({
    show
})

watch(
    () => show.value,
    (v) => {
        if(v){
            init()
        }
    }
)

</script>

<style scoped lang='scss'>
.customTable + :deep(.el-pagination){
    margin-top: 15px;
}
</style>